<script setup lang="ts">
import { ref } from "vue"
import { useRouter } from "vue-router"
import LoginRegisterPopup from "./LoginRegisterPopup.vue"
const router = useRouter()
// 这里可以添加一些404页面的逻辑，比如统计页面访问量等
const goPath = () => {
  router.push("/a")
}
const toolList = [
  {
    title: "关于我们",
    tool: ["联系我们", "加入我们", "规则中心"],
  },
  {
    title: "帮助中心",
    tool: ["商家中心", "网红中心", "公会扶持", "广告投放", "学习中心"],
  },
  {
    title: "免费工具",
    tool: ["免费活动", "免费营销", "免费数据", "免费学习"],
  },
  {
    title: "信任中心",
    tool: ["隐私政策", "服务条款", "服务协议", "使用政策", "营业执照"],
  },
]
const loginRegisterPopup = ref(null)

const openLoginRegisterModal = () => {
  loginRegisterPopup.value.open()
}
</script>

<template>
  <div class="footer">
    <div class="footer-content">
      <div class="left">
        <img
          class="logo"
          src="https://lanhu-oss-2537-2.lanhuapp.com/SketchPngc912267a2d26e09029e5ba1e67de244f76be87d9cc49399fe878e4d9cc93d230?noCache=true"
          alt="logo"
        />
        <h2>{{ $t(`footer.开启你的电商增长之路`) }}</h2>
        <el-button @click="openLoginRegisterModal" type="primary">{{
          $t(`footer.登陆/注册`)
        }}</el-button>
      </div>
      <div class="high-line"></div>
      <div class="tool-list">
        <ul v-for="item in toolList" :key="item" @click="goPath">
          <li class="title">{{ $t(`footer.${item.title}`) }}</li>
          <a v-for="is in item.tool" :key="is">{{ $t(`footer.${is}`) }} </a>
        </ul>
      </div>
    </div>
    <div class="footer-undeline"></div>
  </div>
  <LoginRegisterPopup ref="loginRegisterPopup" />
</template>

<style scoped>
.footer {
  height: 500px;
  background: rgba(23, 24, 27, 0.98);
  position: relative;
}
.footer-content {
  padding: 60px 0 0 136px;
  display: flex;
}
.logo {
  width: 119px;
  height: 51px;
  object-fit: cover;
}
h2 {
  min-width: 220px;
  height: 30px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 22px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 30px;
  text-align: left;
  font-style: normal;
  margin-top: 46px;
}
.el-button {
  width: 100px;
  height: 34px;
  margin-top: 28px;
  background: linear-gradient(135deg, #a43aff 0%, #ff3f81 100%);
  border-radius: 6px;
  border: none;
}
.high-line {
  width: 1px;
  height: 377px;
  border: 1px solid #ffffff;
  opacity: 0.4;
  margin-left: 83px;
}
.footer-undeline {
  width: 1168px;
  height: 1px;
  border: 1px solid #ffffff;
  opacity: 0.4;
  position: absolute;
  left: 50%;
  bottom: 35px;
  transform: translateX(-50%);
}
.tool-list {
  margin-left: 83px;
  min-width: 690px;
  display: flex;
  justify-content: space-between;
}
.title {
  height: 25px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 18px;
  color: #bf74ff;
  line-height: 25px;
  text-align: left;
  font-style: normal;
  list-style: none;
  margin-bottom: 44px;
}
a {
  height: 22px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #ffffff;
  line-height: 22px;
  text-align: left;
  font-style: normal;
  display: block;
  margin-bottom: 28px;
  cursor: pointer;
}
a:hover {
  color: #bf74ff;
}
</style>
